vue.extend,vue.directive,vue.component,mixins,extends使用。

Vue.extend(options)

*参数：

{Object}options

*用法：

使用基础Vue构造器，创建一个子类。参数是一个包含组件选项的对象。
data选项是特例，组要注意，在Vue.extend()中它必须是函数。

<div id="mount-point"></div>
//创建构造器
var Profile = Vue.extend({
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data:function(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    }
})
//创建Profile实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下：

<p>Walter White aka Heisenberg</p>

Vue.component( id, [definition] )

*参数：

{string} id
{Function|Object}[definition]

*用法：

注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

//注册组件，传入一个扩展过的构造器。
Vue.component('my-component',Vue.extend({/*...*/}))
//注册组件，传入一个选项对象（自动调用Vue.extend）
Vue.component('my-component',{/*...*/})
//获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('my-component');

实例：

var Profile = Vue.extend({
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data:function(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    },
    created(){
        console.log('one');
    }
})

为了后面更好的使用Vue.extend()中的options，直接把上面示例中的一些选项提出来，这些选项其实就是前面所说的预设选项：

let baseOptions = {
    template:`<p>{{firstName}} {{lastName}} aka {{alias}}</p>`,
    data(){
        return {
            firstName:'Walter',
            lastName:'White',
            alias:'Heisenberg'
        }
    }
}

这时可以这样使用：

let baseExtend = Vue.extend(baseOptions);

可以使用new关键字来声明这个构造器：

new baseExtend()

这个和new Vue()有点类似，除了我们预设的一些东西之外，Vue还给其预设了很多其它的东西。Vue的实例最终要挂载到一个元素上，那么Vue.extend也是一样，也需要挂载到一个元素上：

new baseExtend().$mount('#app');

尝试像Vue的实例挂载的方法：

let app = new baseExtend({
    el:'#app'
})

最终得到的效果是一样的。除此之外，还可以将其挂载到自定义的标签上，比如：

<custom-element><custom-element>
new baseExtend().$mount('custom-element')

Vue.extend的作用：
Vue.extend常和Vue的组件配合在一起使用。简单点说：vue.extend是构造一个组件的语法器，你给这个构造器预设一些参数，而这个构造器给你一个组件，然后这个组件你就可以用到Vue.component这个全局注册方法里，也可以在任意Vue模板里使用这个构造器。
基于上面的实例，咱们通过Vue.extend构建了一个baseExtend()构造器，这个构造器具有baseOptions设置的参数。
咱们先忽略上面这段描述，来看Vue.component()创建的组件：

Vue.component('base-component',baseOptions)//自动调用Vue.extend()
let app = new Vue({
    el:'#app'
})
<!--HTML-->
<div>
    <base-component></base-component>
</div>

如果我们把Vue.component()中的baseOptions换成前面已创建的扩展器baseExtend：

Vue.component('base-component',baseExtend)
//等同于
Vue.component('base-component',Vue.extend(baseOptions))
//等同于
Vue.component('base-component',baseOptions)

测试可以看到效果是相同的。
理解Vue.extend()和Vue.component()是很重要的。由于Vue本身是一个构造函数(constructor),Vue.extend()是一个继承与方法的类(class),参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并返回相应的构造函数。而Vue.component()实际上是一个类似于Vue.directive()和Vue.filter()的注册方法，它的目的是给指定的一个构造函数与一个字符串ID关联起来。之和Vue可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend().

extends

*类型：

Object|Function

*详细：

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用Vue.extend。这主要是为了便于扩展单文件组件。

*示例：

var Compa = {...}
//在没有调用Vue.extend时候继承CompA
var CompB = {
    extends:CompA,
}

 const extend = {
      data(){return{
        aaaa:2
      }},
      created(){
        console.log('extends')
      },
      methods:{
        abc(){
          console.log(1)
        }
      }
    }
    const extend1 = {
      created(){
        console.log('extends1')
      },
      extends:extend
    }
    const extend2 = {
      extends:extend1
    }
    new Vue({
      el:'#app',
      extends:extend2,
      created(){
        console.log('created')
        this.abc()
        console.log(this.aaaa)
      }
    })
    //extends
    //extends1
    //created
    //1
    //2

mixins

*类型：

Array<Object>

*详细：

mixins选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，它们将在Vue.extend()里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子函数而创建组件本身也有一个，两个函数将被调用。
Mixin钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

示例：

var mixin = {
    created:function(){console.log(1)}
}
var vm = new Vue({
    created:function(){console.log(2)},
    mixins:[mixin]
})
//=>1
//=>2

Vue.directive( id, [definition] )

*参数：

{string} id
{Function | Object} [definition]

*用法：

注册或获取全局指令。

//注册
Vue.directive('ny-directive',{
    bind:function(){},
    inserted:function(){},
    update:function(){},
    componentUpdated:function(){},
    unbind:function(){}
})
//注册(指令函数)
Vue.directive('my-directive',function(){
    //这里将会被‘bind’和‘update’调用
})
//getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

示例。
当页面加载时，该元素将获得焦点（注意：autofocus在移动版Safari上不工作）。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

//注册一个全局自定义指令'v-focus'
Vue.directive('foucs',{
    //当被绑定的元素插入DOM中时
    inserted:function(el){
        //聚焦元素
        el.foucs()
    }
})
//如果想注册局部指令，组件中也接受一个directives的选项：
directives:{
    focus:{
        //指令的定义
        inserted:function(el){
            el.foucs()
        }
    }
}

然后你可以在模板中任何元素上使用新的v-focus属性，如下：

<input v-focus>

钩子函数:
一个指令定义对象可以提供如下几个钩子函数(均为可选)：
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已经被插入文档中）。
update:所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
unbind:只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数（即el、binding、vnode和oldVnode）
钩子函数参数：
指令钩子函数会被传入以下参数：
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含以下属性：

name:指令名，不包括v-前缀。
value:指令的绑定值，例如：v-my-directive="1+1"中，绑定值为2.
oldValue:指令的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如v-my-directive="1+1"中，表达式为‘1+1’。
arg:传给指令的参数，可选。例如：v-my-directive：foo中，参数为foo。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}.

vnode:Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

除了el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。